<template>
    <div class="common-layout">
        <el-container>
            <el-aside :style="{height: leftSideHeight, width: leftSideWidth}">
                <LeftMenu ref="toggleMenuRef" :menu-list="menuList" />
            </el-aside>
            <el-container>
                <el-header>
                    <el-row>
                        <el-col :span="12" style="display:flex;vertical-align: middle;height: 50px">
                            <div style="margin-right: 15px;margin-top: 8px;cursor: pointer" @click="toggleLeftSide()">
                                <el-icon color="#4C4C4C" :size="20">
                                    <Fold v-if="!collapsed"/>
                                    <Expand v-if="collapsed"/>
                                </el-icon>
                            </div>
                            <el-breadcrumb :separator-icon="ArrowRight" style="margin-top: 20px;">
                                <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
                                <el-breadcrumb-item>promotion management</el-breadcrumb-item>dz
                            </el-breadcrumb>
                        </el-col>
                        <el-col :span="12" style="text-align: right;">
                            <el-icon :color="iconStyle.color" :size="iconStyle.size" class="d-nav-icon">
                                <Bell />
                            </el-icon>
                            <el-icon :color="iconStyle.color" :size="iconStyle.size" class="d-nav-icon">
                                <FullScreen />
                            </el-icon>
                            <el-icon :color="iconStyle.color" :size="iconStyle.size" class="d-nav-icon">
                                <IconMenu />
                            </el-icon>
                        </el-col>
                    </el-row>
                </el-header>
                <el-main>
                    <el-row>
                        <el-col :span="24">
                            <el-tabs
                                v-model="activiedTab"
                                class="nav-tabs"
                                type="card"
                                closable
                            >
                                <el-tab-pane
                                    v-for="item in editableNavTabs"
                                    :key="item.name"
                                    :name="item.name"
                                >
                                    <template #label>
                                        <!--<router-link class="success" :to="item.href">{{item.title}}</router-link>-->
                                        {{item.title}}
                                    </template>
                                    <el-scrollbar height="960px">
                                        <router-view :key="item.viewName" />
                                    </el-scrollbar>
                                </el-tab-pane>
                            </el-tabs>
                        </el-col>
                    </el-row>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
  import { defineComponent, reactive, toRefs, onMounted, onActivated, ref, provide } from "vue";
  import routes from '../routes/routes';
  import { MenuItem } from '../types/interfaces';

  import LeftMenu from './components/leftMenu.vue';
  import {
    Location,
    Document,
    Menu as IconMenu,
    Setting,
    Fold,
    Expand,
    ArrowLeft,
    ArrowRight,
    FullScreen,
    Bell
  } from '@element-plus/icons-vue'

const leftSideHeight = ref('0px');
const leftSideWidth = ref('200px');
const collapsed = ref(false);
const toggleMenuRef = ref();

const menuList = ref([
    {
        id:1,
        title: 'Menu1',
        hasChild: false,
        icon: 'Document',
        href: '/about',
        index: '/about',
        viewName: 'about'
    },
    {
        id:2,
        title: 'Menu2',
        icon: 'Location',
        hasChild: true,
        index: '2',
        childs: [
            {
                id: 3,
                title: 'Menu2-sub1',
                parentId: 2,
                icon: 'Document',
                href: '/about',
                hasChild: false,
                index:'/about',
                viewName: 'about'
            },
            {
                id: 4,
                title: 'Menu2-sub2',
                parentId: 2,
                icon: 'Document',
                hasChild: true,
                index:'/about',
                viewName: 'about',
                childs: [
                    {
                        id: 6,
                        title: 'Menu2-sub2-sub1',
                        parentId: 4,
                        icon: 'Document',
                        href: '/about',
                        index:'/about',
                        viewName: 'about'
                    }
                ]
            }
        ]
    },
    {
        id:5,
        title: 'Menu3',
        hasChild: false,
        icon: 'Setting',
        href: '/queryTable',
        index: '/queryTable',
        viewName: 'queryTable'
    }
]);


const resize = () => {
    let ch = document.documentElement.clientHeight + 'px';
    leftSideHeight.value = ch;
}

onMounted(() => {
    resize();
    window.onresize = ()=> {
        resize();
    }
})

const toggleLeftSide = () => {
    if (collapsed.value) {
        leftSideWidth.value = '200px';
        collapsed.value = false;
    } else {
        leftSideWidth.value = '70px';
        collapsed.value = true;
    }
    toggleMenuRef.value.toggleMenu();
}

const activiedTab = ref('0');
const editableNavTabs = ref([
  {
    title: '首页',
    name: '0',
    href: '/',
    viewName: 'home'
  }
]);

const refreshNavTabs = (menuItem: MenuItem) => {
    for(let item of editableNavTabs.value) {
        
    }

    activiedTab.value = menuItem.id + '';
}

const closeNavTab = (targetName: string) => {
    const tabs = editableNavTabs.value;
    if (tabs.length == 1) {
        return;
    }
    editableNavTabs.value = tabs.filter((tab) => tab.name != targetName);
    activiedTab.value = editableNavTabs.value[editableNavTabs.value.length - 1].name;
}

const iconStyle = {
    color: '#4C4C4C',
    size: 20
}

provide('refreshNavTabs', refreshNavTabs);

</script>


<style scoped>
.common-layout .el-header {
  color: var(--el-text-color-primary);
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid var(--el-border-color-base);
}

.common-layout .el-aside {
  background-color: #343A40;
  color: var(--el-text-color-primary);
}

.common-layout .el-main {
  color: var(--el-text-color-primary);
  --el-main-padding: 10px;
}

.common-layout > .el-container {
    padding-top: 0px;
}

.common-layout .el-container:nth-child(5) .el-aside,
.common-layout .el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.common-layout .el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.nav-tabs {
    height: 50px;
}

.el-tabs__item {
    height: 25px;
    line-height: 25px;
}

.d-nav-icon {
    margin-top: 15px;margin-right: 20px;
}
</style>